<template>
	<view class="certification">
		<view class="certification_nav"  :style="{'paddingTop':StatusBar + 'px'}">
			<view class="nav_back">
				<text class="iconfont icon-Left"  @click="navigateBack()"></text>
			</view>
			<view class="nav_tips">根据国家规定，本平台禁止未成年人交易</view>
		</view>
			
		<view class="certification_box">
			<view class="box_title">请您使用有效身份证信息认证</view>
			<view class="box_list">
				<view class="list_item">
					<view class="item_bottom">
						<view class="bottom_item flex">
							<view class="text-class"><text>姓名</text></view>
							<u--input v-model="details.name" :disabled="status"  placeholder="请输入姓名" border="none" clearable class="input-class"></u--input>
						</view>
						<view class="bottom_item flex">
							<view class="text-class"><text>身份证号</text></view>
							<u--input v-model="details.id_card" :disabled="status" placeholder="请输入身份证号" border="none" clearable class="input-class"></u--input>
						</view>
					</view>
					<view class="bottom_item btn" v-if="!status" @click="user_message()">立即认证</view>
					<view class="bottom_item" v-if="status">已认证</view>
				</view>
			</view>
		</view>
		<view class="btm-class flex">
			<view><image src="../../static/certification/tips.png"></image></view>
			<view>实名仅用于核实您是否为成年用户，不会对信息做任何 采集与保留，请放心使用</view>
		</view>
	</view>
</template>

<script>
import {user_message, get_user_message} from '@/api/user.js'
export default { 
	data() {
		return {
			status: true,
			details:{
				name: '',
				id_card: ''
			}
		};
	},
	onLoad() {
		this.get_user_message()
	},
	methods: {
		async get_user_message(){
			let data = await get_user_message()
			if(data) {
				if (data.data.status == 1) {
					this.status = true
					this.details.name = data.data.name
					this.details.id_card = data.data.id_card
				}else {
					this.status = false
				}
			}
		},
		async user_message(){
			let data = await user_message(this.details)
			if(data) {
				this.get_user_message()
			}
		}
	}
};
</script>

<style>
page {
	background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.certification {
	.nav_back {
		padding: 60rpx;
		.iconfont {
			font-size: 36rpx;
			font-weight: bold;
			color: #09244B;
		}
	}
	.certification_nav {
		overflow: hidden;
		background: url(~@/static/certification/nav.png) no-repeat;
		background-size: 100%;
		box-sizing: border-box;
		height: 504rpx;
		position: relative;
		.nav_tips {
			position: absolute;
			top: 384rpx;
			left: 62rpx;
			font-size: 24rpx;
			color: #243a72;
		}
	}
	.certification_box {
		position: relative;
		background-color: #fff;
		margin: -52rpx 32rpx 0;
		border-radius: 20rpx;
		height: 544rpx;
		box-sizing: border-box;
		.box_title {
			height: 96rpx;
			background: #edf1fc;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 28rpx;
			font-weight: bold;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}
		.box_list {
			background-color: #fff;
	
			border-radius: 20rpx;
			padding: 10rpx 20rpx;
			.list_item {
				padding: 0 10rpx;
	
				background: #ffffff;
				border-radius: 20rpx;
			}
			.bottom_item {
				height: 88rpx;
				background: #f3f4f9;
				border-radius: 80rpx;
				margin: 40rpx 0;
				text-align: center;
				line-height: 88rpx;
				padding: 0 20rpx;
				font-weight: bold;
			}
			.btn {
				height: 88rpx;
				background: #fdd637;
				border-radius: 80rpx;
			}
		}
	}
}


.input-class {
	margin-left: 20rpx;
}
.text-class {
	text-align: left;
	width: 150rpx;
	font-weight: bold;
	font-size: 28rpx;
	box-sizing: border-box;
	padding-left: 20rpx;
}

.btm-class {
	padding: 18rpx 28rpx;
	background: #ffffff;
	border-radius: 20rpx;
	height: 70rpx;
	font-size: 24rpx;
	color: #6c6c6c;
	margin: 28rpx;
	display: flex;
	align-items: center;
	image {
		margin-right: 10rpx;
		width: 48rpx;
		height: 42rpx;
	}
}
.nav-class {
	position: relative;
	margin-top: 100rpx;
}
.flex {
	display: flex;
}
</style>
